<!--
 * @Description: What's this for
 * @Autor: WangYuan
 * @Date: 2022-03-28 16:47:04
 * @LastEditors: WangYuan
 * @LastEditTime: 2022-03-28 17:00:31
-->
<template>
  <div class="wrap">
    <el-form ref="phoneForm" :model="form">
      <el-form-item
        class="formItem"
        v-for="(item, index) in form.list"
        :key="index"
        :prop="'list.' + index"
      >
        <div class="item">
          <el-input
            class="item-input"
            :disabled="disabled"
            v-model.trim="form.list[index]"
            placeholder="请输入电话号码"
          ></el-input>
          <el-button :disabled="disabled" @click="form.list.splice(index, 1)">
            删除
          </el-button>
        </div>
      </el-form-item>
    </el-form>
    <el-button style="margin-top: 10px" :disabled="disabled" @click="add">
      新增
    </el-button>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Array,
      default: () => ['']
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  created () {
    this.form.list = this.value
  },
  data () {
    return {
      form: {
        list: ['']
      }
    }
  },
  watch: {
    'form.list': {
      handler (newVal) {
        this.$emit('input', this.form.list)
      },
      deep: true
    }
  },
  methods: {
    add () {
      console.log(this.form.list.length)
      if (this.form.list.length < 5) {
        this.form.list.push('')
      } else {
        this.$swal({
          message: '店铺客服电话最多5个',
          type: 'warning'
        })
      }
    },
    validatePhone () {
      let flag
      this.$refs['phoneForm'].validate(valid => {
        if (valid) {
          console.log('return true')
          flag = true
        } else {
          flag = false
        }
      })
      return flag
    }
  }
}
</script>

<style lang="scss" scoped>
.formItem {
  margin-bottom: 10px;
}
.item {
  display: flex;

  .item-input {
    margin-right: 10px;
  }
}
</style>
